/**
 * useDeferredValue
 *
 *    概念：
 *      获取一个延迟值，可以让你延迟更新 UI 的某些部分
 *
 *    语法
 *      const deferredValue = useDeferredValue(value)
 *
 *    PS:
 *      1. 初始化时 deferredValue 与 value 一致
 *      2. 更新时，使用旧的 value 得到 deferredValue
 *               再次使用新的 value 得到 deferredValue
 */

import { useDeferredValue, useState, memo } from "react";

function SlowPost({ index }) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // 每个 item 都等待 1 毫秒以模拟极慢的代码。
  }

  return <li className="item">Post #{index + 1}</li>;
}

const SearchResult = memo(({ query }) => {
  if (!query) {
    return null;
  }

  // 定义一个搜索结果
  const items = [];

  // 循环往 item 中增加内容
  for (let i = 1; i < 1000; i++) {
    items.push(<SlowPost key={i} index={i} />);
  }

  return <ul>{items}</ul>;
});

export default function App() {
  // query 给到 input 使用
  const [query, setQuery] = useState("");
  // queryTwo 给到 SearchResult 使用
  const queryTwo = useDeferredValue(query);

  console.log(`App Render query: ${query} | queryTwo: ${queryTwo}`);

  const handleChange = (e) => {
    setQuery(e.target.value);
  };
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={handleChange} />
      </label>

      <SearchResult query={queryTwo} />
    </>
  );
}

// export default function App() {
//   const [query, setQuery] = useState("1");

//   // 基于 query 获取一个 deferredValue
//   const deferredQuery = useDeferredValue(query);

//   console.log(`App 渲染 query: ${query} | deferredQuery: ${deferredQuery}`);

//   return (
//     <div>
//       <h1>App</h1>
//       <input
//         type="text"
//         value={query}
//         onChange={(e) => setQuery(e.target.value)}
//       />
//     </div>
//   );
// }
